<template>
  <a-row :gutter="gutter">
    <template v-for="(item, index) in datas">
      <a-col
        :key="index"
        :span="item.span ? Number(item.span) : 24"
        v-if="item.toggle === true || item.toggle === false ? item.toggle : true"
      >
        <a-form-model-item :label="item.label" :prop="item.prop" v-bind="$attrs">
          <a-input-password
            v-if="item.tagType == 'password'"
            placeholder="input password"
            v-model="form[item.prop]"
            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
            :disabled="item.disabled"
            :class="item.class"
          />
          <a-input
            v-else-if="item.tagType == 'input'"
            v-model="form[item.prop]"
            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
            :disabled="item.disabled"
            :class="item.class"
          />
          <a-input-number
            style="width: 100%"
            v-else-if="item.tagType == 'input-number'"
            v-model="form[item.prop]"
            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
            :disabled="item.disabled"
            :class="item.class"
            :min="item.min"
            :max="item.max || 99999"
          />
          <a-textarea
            v-else-if="item.tagType == 'textarea'"
            v-model="form[item.prop]"
            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
            :disabled="item.disabled"
            :auto-size="{ minRows: 3, maxRows: 5 }"
            :class="item.class"
          />
          <j-dict-cascader
            v-else-if="item.tagType == 'dict-cascader'"
            v-model="form[item.prop]"
            :options="item.options"
            :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label"
            :disabled="item.disabled"
            :class="item.class"
            style="min-width: 100px"
          />

          <j-dict-select-tag
            v-else-if="item.tagType == 'dict-select' && item.dictCode"
            v-model="form[item.prop]"
            :dictCode="item.dictCode"
            :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label"
            :disabled="item.disabled"
            :type="item.type"
            :class="item.class"
            style="min-width: 100px"
            @change="handleInput(item.prop, $event)"
          />
          <j-multi-select-tag
            v-else-if="item.tagType == 'dict-multi-tag' && (item.dictCode || Array.isArray(item.dictOptions))"
            v-model="form[item.prop]"
            :dictCode="item.dictCode"
            :options="item.dictOptions"
            :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label"
            :disabled="item.disabled"
            :type="item.type"
            :class="item.class"
            @change="handleInput(item.prop, $event)"
          />
          <j-search-select-tag
            v-else-if="item.tagType == 'dict-select' && item.dictOptions && Array.isArray(item.dictOptions)"
            v-model="form[item.prop]"
            :dictOptions="item.dictOptions"
            :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label"
            :disabled="item.disabled"
            :class="item.class"
            :style="item.style"
            @change="handleInput(item.prop, $event)"
          />
          <a-time-picker
            v-else-if="item.tagType == 'time-picker'"
            v-model="form[item.prop]"
            :valueFormat="item.format ? item.format : 'HH:mm:ss'"
            :format="item.format ? item.format : 'HH:mm:ss'"
            :use12Hours="item.use12Hours || item.use12Hours == false ? item.showTime : false"
            :disabled="item.disabled"
            :class="item.class"
            style="width: 100%"
            @change="handleInput(item.prop, $event)"
          />
          <a-date-picker
            v-else-if="item.tagType == 'date-picker'"
            v-model="form[item.prop]"
            :valueFormat="item.format ? item.format : 'YYYY-MM-DD HH:mm:ss'"
            :format="item.format ? item.format : 'YYYY-MM-DD HH:mm:ss'"
            :show-time="item.showTime || item.showTime == false ? item.showTime : { format: 'HH:mm:ss' }"
            :disabled="item.disabled"
            :class="item.class"
            style="width: 100%"
            @change="handleInput(item.prop, $event)"
          />
          <a-range-picker
            v-else-if="item.tagType == 'range-picker'"
            v-model="form[item.prop]"
            :valueFormat="item.format ? item.format : 'YYYY-MM-DD HH:mm:ss'"
            :format="item.format ? item.format : 'YYYY-MM-DD HH:mm:ss'"
            :show-time="item.showTime || item.showTime == false ? item.showTime : { format: 'HH:mm:ss' }"
            :disabled="item.disabled"
            :class="item.class"
            style="width: 100%"
            @change="handleInput(item.prop, $event)"
          />
          <a-date-picker
            v-else-if="item.tagType == 'year'"
            mode="year"
            v-model="form[item.prop]"
            placeholder="请输入年份"
            format="YYYY"
            style="width: 100%"
            :open="item.open"
            @openChange="openChangeOne"
            @panelChange="panelChangeOne"
          />
          <z-linkage-area
            v-else-if="item.tagType == 'linkage-area'"
            v-model="form[item.prop]"
            :disabled="item.disabled"
            :type="item.type"
            :class="item.class"
            @change="handleInput(item.prop, $event)"
            @rows="handleRows(item.prop, $event)"
          />
          <j-image-upload
            v-else-if="item.tagType == 'upload-image'"
            v-model="form[item.prop]"
            :disabled="item.disabled"
            :bizPath="item.bizPath"
            :isMultiple="item.isMultiple"
            :class="item.class"
          />
          <span v-else-if="item.tagType == 'upload-file'" :class="item.class" style="position: relative">
            <j-upload
              v-model="form[item.prop]"
              :disabled="item.disabled"
              :bizPath="item.bizPath"
              :isMultiple="item.isMultiple"
            />
            <span style="position: absolute; left: 124px; top: 0">
              <a-tooltip placement="topLeft" :title="item.fileDescribe" v-if="item.fileDescribe">
                <a-icon type="question-circle" />
              </a-tooltip>
              {{ item.fileFormat ? '支持扩展名：' + item.fileFormat : '' }}
            </span>
          </span>
          <!--//自定义表单项-->
          <slot v-else :name="'slots-' + item.prop"></slot>
        </a-form-model-item>
      </a-col>
    </template>
    <!--//自定义按钮操作区域-->
    <template v-if="this.$slots['submit-action']">
      <slot name="submit-action" />
    </template>
    <!--//默认按钮操作区域-->
    <template v-else-if="!this.$slots['submit-action'] && Object.keys(submitAction).length > 0 && submitAction.show">
      <a-col :span="Object.keys(submitAction).length > 0 && submitAction.span ? Number(submitAction.span) : 24">
        <a-space :size="8">
          <a-button type="primary" @click="onSubmit" icon="search">查询</a-button>
          <a-button @click="onReset" icon="reload">重置</a-button>
          <a v-if="Object.keys(submitAction).length > 0 && submitAction.toggle" @click="submitToggle = !submitToggle">
            {{ submitToggle ? '收起' : '展开' }}
            <a-icon :type="submitToggle ? 'up' : 'down'" />
          </a>
        </a-space>
      </a-col>
    </template>
  </a-row>
</template>

<script>
// <a-form-model layout="horizontal" ref="subForm" slot="detail" :model="model" :rules="validatorRules" v-bind="formItemLayout">
const Item = {
  name: 'FormItem',
  props: {
    label: {
      type: String,
      default: '',
      required: false,
    },
  },
  inject: {
    col: {
      type: Number,
    },
  },
  render() {
    return (
      <a-col class="item-box">
        <div class="y-search-item">
          <div class="y-search-label">9999</div>
          <div class="y-search-content">55555</div>
        </div>
      </a-col>
    )
  },
}
export default {
  props: {
    datas: {
      type: Array,
      default: () => [],
    },
    form: {
      type: Object,
      default: () => { },
    },
    rules: {
      type: Object,
      default: () => { },
    },
    gutter: {
      type: Number,
      default: 8,
    },
    toggle: {
      type: Boolean,
      default: false,
    },
    submitAction: {
      type: Object,
      default: () => {
        return {
          show: false,
          toggle: false,
          span: 6,
        }
      },
    },
  },
  data() {
    return {
      submitToggle: false,
    }
  },
  watch: {
    toggle: {
      immediate: true,
      deep: true,
      handler(val) {
        this.handleToggle(val)
      },
    },
    submitToggle: {
      immediate: true,
      deep: true,
      handler(val) {
        this.handleToggle(val)
      },
    },
  },
  computed: {
    // v-bind="modalProps"
    // modalProps() {
    //   return Object.assign({
    //     valueKey: this.valueKey,
    //     // multiple: this.multiple,
    //     returnKeys: this.returnKeys,
    //     displayKey: this.displayKey || this.valueKey
    //   }, this.$attrs)
    // },
  },
  methods: {
    prop(field) {
      let bool = false
      if (this.rules && Object.keys(this.rules).length > 0 && this.rules[field]) {
        let item = this.rules[field].find((obj) => {
          return obj.required
        })
        bool = item && Object.keys(item).length > 0 && item.required ? item.required : false
      }
      return bool
    },
    handleInput(prop, e = '') {
      let val
      if (Object.keys(e).includes('target')) {
        val = e.target.value
      } else {
        val = e
      }
      this.$emit('change', prop, val)
    },
    handleRows(prop, val) {
      this.$emit('rows', prop, val)
    },
    handleToggle(toggle) {
      this.datas.forEach((item) => {
        if (item.hasOwnProperty('toggle') && toggle !== item.toggle) {
          item.toggle = !item.toggle
        }
      })
    },
    openChangeOne(status) {
      this.$emit('openChangeOne', status)
    },
    panelChangeOne(value) {
      this.$emit('panelChangeOne', value)
    },
    onSubmit() {
      this.$emit('onSubmit')
    },
    onReset() {
      this.$emit('onReset')
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
<style lang="less" scoped>
:deep(.ant-form-item) {
  margin-bottom: 6px;

  .ant-form-item-label label {
    word-wrap: break-word;
    word-break: normal;
    display: inline-block;
    white-space: normal;
    line-height: normal;
    padding-right: 4px;
  }
}

:deep(.area-select-wrap) {
  .area-select {
    margin-left: 4px;

    &:last-of-type {
      margin-left: 0;
    }
  }
}
</style>
